<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>2.29节,获取复选框所有选中内容</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<style>
    .contentCheckbox{

        text-align: center;

    }
    ul li{
        list-style: none;
        display: block;
        border: 1px #ccc solid;
        width: 300px;
        height: 20px;
        margin-top: 1px;
    }
    ul li input,ul li div{
        position: relative;
        float: left;
    }
</style>
<body>
<h2>获取复选框所有选中内容</h2>
<ul>
    <li>
        <input type="checkbox" name='getSelectContent'><div class="contentCheckbox">等待选择的内容····1</div>
    </li>
    <li>
        <input type="checkbox" name='getSelectContent'><div class="contentCheckbox">等待选择的内容····2</div>
    </li>
    <li>
        <input type="checkbox" name='getSelectContent'><div class="contentCheckbox">等待选择的内容····3</div>
    </li>
</ul>
<p id='selectedContents'>被选择的内容：选择内容为空</p>
<script type="text/javascript">
    window.onload = function(){
        var selectContents = "",//待填充的文本
                _selectContent = document.getElementsByName("getSelectContent"),
                i = 0,
                sl = _selectContent.length;//获取元素的长度即个数

        for(;  i < sl ; i++){//限制复选框最多选择3项
            _selectContent[i].onclick = function(){
                var _t = this.nextSibling.innerText;
                if(this.checked){//如果内容被选中，则填充文本，否则删除
                    selectContents += "<br />" + _t;
                }else{
                    selectContents = selectContents.replace("<br />" + _t, "")
                }
                document.getElementById("selectedContents").innerHTML = "被选择的内容："+selectContents;//填充html文本
            }

        }
    };
</script>
</body>
</html>